<template>
  <div class="dust-page">
    <ScaleScreen>
      <div class="bg">
        <div class="big-screen"  v-if="schooleId!==null">
          <myheader :dataVal="echartsData.myheaderVal" />
          <div class="screen-boxs u-p-t-10">
            <div class="flex screen-center">
              <div style="width: 70%">
                <!-- <p class="schoolname">{{echartsData.myheaderVal.school_name}}</p> -->
                <!--左边大盒子 整体概况  -->
                <leftTop :dataVal="{
                  leftTopVal1:echartsData.leftTopVal1,
                  leftTopVal2:echartsData.leftTopVal2
                }">
                  <!-- 设备在线分布--地图 -->
                  <leftRight slot="right" :location="location" :schooleId="schooleId" />
                  <leftBottom slot="bottom" :schooleId="schooleId" />
                </leftTop>
              </div>

              <div style="width: 30%">
                <!-- 当日学生统计 -->
                <rightTop :dataVal="echartsData.leftTopVal2">
                  <rightBottom slot="bottom" :schooleId="schooleId" />
                </rightTop>
              </div>
            </div>
            <div class="flex screen-bottom">
              <div style="width:46%;">
                <bottomLeft :schooleId="schooleId" />
              </div>
              <div class=" u-p-l-10" style="width:54%;">
                <div class="flex boxline" style="height:100%">
                  <bottomCenter  style="width:40%;" :schooleId="schooleId"  />
                  <bottomRight  style="width:60%;" :schooleId="schooleId" />
                </div>
              </div>
              
            </div>
          </div>
        </div>
      </div>
    </ScaleScreen>
  </div>
</template>

<script>
import ScaleScreen from "../components/ScaleScreen/index.vue";
import myheader from "./components/header.vue";
import leftTop from "./components/left-top.vue";
import leftRight from "./components/left-right.vue";
import leftBottom from "./components/left-bottom.vue";
import rightTop from "./components/right-top.vue";
import rightBottom from "./components/right-bottom.vue";
import bottomLeft from "./components/bottom-left.vue";
import bottomCenter from "./components/bottom-center.vue";
import bottomRight from "./components/bottom-right.vue";
export default {
  name: "dataCenter",
  components: {
    myheader,
    leftTop,
    leftRight,
    ScaleScreen,
    leftBottom,
    rightTop,
    rightBottom,
    bottomLeft,
    bottomCenter,
    bottomRight
  },
  data() {
    return {
      name:'',
      echartsData:{
        
      },
      location: null,
      schooleId:null
    };
  },
  created(){
    if(this.$route.query){
      this.schooleId=this.$route.query.schoole_id||0
    }else{
      this.schooleId = 0 
    }
  },
  mounted(){
    this.getData()
    this.getAttendanceData()
    
    
    
  },
  methods: {
    
    // 获取平台信息
    async getData(){
      let params = {schoole_id:this.schooleId}
      let { data } = await this.$http.get('/data_center/index', {params})
      try{
        this.$set(this,'location',data.data.location)
        this.$set(this.echartsData,'myheaderVal',data.data)
        this.$set(this.echartsData,'leftTopVal1',data.data)
      } catch {
        console.log('error')
      }
    },
    // 获取今日学生出勤信息
    async getAttendanceData(){
      let params = {schoole_id:this.schooleId}
      let { data } = await this.$http.get('/data_center/getTodayAttendance', {params})
      try{
        if ( data.code === 0 ) {
          this.$set(this.echartsData,'leftTopVal2',data.data)
        }
      } catch {
        console.log('error')
      }
    }
  },
};
</script>

<style lang="scss">
@import url("../../../../views/management/dataCenter/style.scss");

@for $i from 1 through 1000 {
  @if $i % 2 == 0 or $i % 5 == 0 {
    .u-margin-#{$i},
    .u-m-#{$i} {
      margin: $i + px;
    }
    .u-padding-#{$i},
    .u-p-#{$i} {
      padding: $i + px;
    }
    @each $short, $long in l left, t top, r right, b bottom {
      .u-m-#{$short}-#{$i} {
        margin-#{$long}: $i + px;
      }

      .u-p-#{$short}-#{$i} {
        padding-#{$long}: $i + px;
      }
      .u-margin-#{$long}-#{$i} {
        margin-#{$long}: $i + px;
      }
      .u-padding-#{$long}-#{$i} {
        padding-#{$long}: $i + px;
      }
    }
  }
}

* {
  box-sizing: border-box;
}
.dust-page {
  width: 100%;
  height: 100vh;
  background: #081326;
}
.bg {
  width: 100%;
  height: 100%;
}
.big-screen {
  // width: 1920px;
  // height: 1080px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url("../../../../assets/img/bigScreen.png") no-repeat;
  background-size: 100% 100%;
  // height: 100vh;
  display: flex;
  flex-direction: column;
}
.screen-center {
  height: 70%;
}
.screen-bottom {
  height: 30%;
  padding: 10px 0;
}
.screen-boxs {
  flex: 1;
  padding: 10px;
  margin-bottom: 10px;
  padding-bottom: 20px;
  overflow: hidden;
}



</style>
